<!-- 登录/ -->

<template>
	<view class="box">
		<image class="bg" src="/static/images/login-bg.png" mode=""></image>
		<view class="top">
			<view class="title">您好，</view>
			<view class="text">欢迎登录车联网服务！</view>
		</view>

		<image class="car" src="/static/images/login-car.png" alt="" />
		<view class="form">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="login" ref="uForm">
				<u-form-item prop="userInfo.phone" borderBottom ref="phone">
					<u--input placeholder="手机号登陆" v-model="login.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item prop="userInfo.code" borderBottom ref="code">
					<u-input style="padding: 0;" border="0" placeholder="输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="30" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" shape="circle" type="primary" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
			<u-button class="login" shape="circle" type="primary" @click="skip">登录</u-button>
			<!-- 弹出层 -->
			<u-popup :show="show" :round="20">
				<view class="popup">
					<view class="popup_title">获取你的位置信息</view>
					<view class="popup_text">你的位置信息将用于获取你附近的站点</view>
					<view class="bns">
						<view class="bn">
							<u-button @click="close" style="height: 60rpx;" color="rgb(223 223 223)" type="primary"
								size="large">拒绝</u-button>
						</view>
						<view class="bn">
							<u-button @click="close" style="height: 60rpx;" type="primary" size="large">允许</u-button>
						</view>

					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				login: {
					userInfo: {
						phone: '',
						code: '',
					},
				},
				show: true
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 跳转页面
			skip() {
				uni.switchTab({
					url: '../index/index'
				});
			},
			// 关闭弹出层
			close() {
				this.show = false;
				// console.log('111')
			}
		},
	}
</script>

<style scoped>
	page {
		background-color: transparent;
	}

	.box {
		overflow: hidden;
		position: relative;
	}

	.bg {
		position: absolute;
		width: 750rpx;
		height: 405rpx;
		z-index: -99;
	}

	.top {
		color: #fff;
		margin-top: 150rpx;
		margin-left: 95rpx;
	}

	.top .title {
		font-size: 40rpx;
	}

	.top .text {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.car {
		width: 280rpx;
		height: 227rpx;
		position: absolute;
		top: 175rpx;
		right: 30rpx;
	}

	.form {
		background-color: white;
		height: 990rpx;
		margin-top: 85rpx;
		border-radius: 50rpx 50rpx 0 0;
		padding: 130rpx 95rpx 0 95rpx;
		box-sizing: border-box;
	}

	.login {
		margin-top: 60rpx;
	}

	/* 弹出层 */
	.popup {
		padding: 60rpx;
	}

	.popup_title {
		font-size: 32rpx;
		margin-bottom: 25rpx;
	}

	.popup_text {
		font-size: 24rpx;
		color: #a9a3a3;
		margin-bottom: 25rpx;
	}

	.bns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.bn {
		width: 240rpx;
	}
</style>